<template>
    <view>
        <view class="top">
            <view :style="{ height: iStatusBarHeight + 'px'}"></view>

            <view class="z-nav">
                <view class="search-block">
                    <view class="search-ico-wapper">
                        <image src="../../static/icon/search@3x.png" class="search-icon"></image>
                    </view>
                    <input placeholder="搜索商品" maxlength="20" class="search-text" focus/>
                </view>
                <view class="search-font">
                    <text @tap="search_list()">搜索</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{

            }
        },
        methods:{
            search_list(){
                uni.navigateTo({
                    url:"/pages/seek/seekDemo"
                })
            }
        }
    }
</script>

<style lang="scss" scoped>

    .z-nav{
        display: flex;
        flex-direction:row; /* 水平轴上进行排列*/
        margin-top: 15rpx;
    }
    .search-block{
        display:flex;
        flex-direction:row;
        width: 540rpx;
        height: 70rpx;
        border-radius: 35rpx;
        margin: 0 25rpx;
        justify-content: center;
        background-color:#f2f2f2;
    }
    .search-icon{
        width: 60rpx;
        height: 60rpx;

    }
    .search-text{
        font-size:30rpx;
        width:180rpx;
        height: 60rpx;
        border-radius:0 20rpx 20rpx 0;
        color: #999999;
        margin-top: 5rpx;
        background-color: #f2f2f2;
    }
    .search-ico-wapper{
        border-radius: 20rpx 0 0 20rpx;
        background-color:#f2f2f2;
        display: flex;
        flex-direction:column;
        justify-content: center;
        padding: 0 10rpx;

    }
    .search-font{
        display: flex;
        justify-content: flex-start; /* 从左到右进行排列*/
        width: 130rpx;
        height: 70rpx;
        background-image: linear-gradient(90deg, #ffca4b 0%, #ff4200 100%),
        linear-gradient(#f2f2f2, #f2f2f2);
        background-blend-mode: normal, normal;
        border-radius: 35rpx;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 28rpx;
    }
</style>
